<script setup lang="ts">
import { Icon } from "@iconify/vue";
import QuickNav from "@/views/Home/components/QuickNav.vue";

</script>

<template>
  <div class="main-contain relative">
    <div class="pure-wrapper flex items-center absolute top-20 right-12 cursor-pointer px-2 py-2">
      <Icon icon="icon-park-outline:sleaves" width="1.2rem" height="1.2rem" />
    </div>
    <div>
      <QuickNav />
    </div>
  </div>
</template>

<style scoped lang="less">
.main-contain {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;

  .pure-wrapper {
    &:hover {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.3);
    }
  }
}

.time-box {
  color: #fff;
  text-align: center;

  .time {
    font-size: 70px;
    line-height: 70px;
    letter-spacing: 0;
    font-weight: 600;
  }

  .day-week {
    padding-top: 10px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: 0;
  }
}
</style>
